<template>
  <el-dialog :title="title" v-model="dialogVisible" width="600px" append-to-body
    class="addExperimentDialog dialog-vertical-center" :close-on-click-modal="false" :close-on-press-escape="false"
    @close="dialogClose" @closed="dialogClose">
    <el-form ref="dialogForm" v-loading="versionLoading" :model="form" label-width="80px">
      <el-form-item label="实验名称" prop="name">
        <el-input v-model.trim="form.name" placeholder="请输入实验名称" maxlength="20" show-word-limit />
      </el-form-item>
      <el-form-item label="版本" prop="version_id">
        <div v-if="versionData.length" class="displayFlex">
          <el-select v-model="form.version_id" placeholder="请选择版本" class="width100">
            <el-option v-for="item in versionData" :key="item.value" :label="item.label" :value="item.value">
              <span class="name">{{ item.label }}</span>
            </el-option>
          </el-select>
          <el-button style="margin-left: 8px;" type="text" @click="handleSaveVersion()">创建新版本</el-button>
        </div>
        <div v-else-if="versionLoading">
          <span><i class="el-icon-loading" style="margin-right: 6px" />版本数据获取中...</span>
        </div>
        <div v-else-if="!versionLoading">
          <span v-if="versionError">版本数据获取错误,<el-button type="text" @click="getVersionData()">重新获取</el-button></span>
          <span v-else>暂无版本数据,<el-button type="text" @click="handleSaveVersion()">创建一个工作流版本</el-button></span>
        </div>
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input v-model="form.desc" class="show-word-limit" type="textarea" :autosize="{ minRows: 2 }"
          placeholder="请输入描述" maxlength="50" show-word-limit />
      </el-form-item>
    </el-form>
    <div style="display:flex;justify-content:flex-end;">
      <el-button @click="dialogClose()">取消</el-button>
      <el-button type="primary" :loading="versionLoading || btnSaveLoading" @click="saveCommit">{{ buttonText
      }}</el-button>
    </div>
    <save-version-dialog ref="saveVersionDialogRef" @successFun="getVersionData()" />
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, nextTick } from "vue"
import { useRouter } from 'vue-router';
import { designerStore } from 'src/stores/designerTool/designerTool'
import SaveVersionDialog from 'src/pages/designerTool/canvas/RightProperty/saveVersionDialog.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getVersion, postRunWorkflows } from 'src/api/designerTool'
const router = useRouter()
const store = designerStore()
const dialogVisible = ref(false)
const buttonText = ref('创建')
const title = ref('创建实验')
const btnSaveLoading = ref(false)
const form = ref({
  name: '',
  version_id: '',
  desc: ''
})
const versionLoading = ref(false)
const versionData = ref(<any>[])
const versionError = ref('')
const saveVersionDialogRef = ref<any>(null)
function init() {
  dialogVisible.value = true
  getVersionData()
}
function dialogClose() {
  dialogVisible.value = false
}
function getVersionData() {
  versionError.value = ''
  versionLoading.value = true
  getVersion(store.project_id, store.template_id).then((res: any) => {
    versionLoading.value = false
    versionData.value = res.data.results.map((row: any) => {
      return {
        label: 'V' + row.version,
        value: row.id
      }
    })
  }, (res: any) => {
    ElMessage(res.result)
  })
}
function saveCommit() {
  const data = {
    name: form.value.name,
    description: form.value.desc,
    is_experiment: true
  }
  btnSaveLoading.value = true
  postRunWorkflows(store.project_id, form.value.version_id, data).then(res => {
    ElMessageBox.alert('创建成功', '提示', {
      confirmButtonText: '知道了',
    }).then(() => {
      let obj = {
        workflow_id: res.data.workflow_id,
        id: res.data.id
      }
      store.EXOERIMENTS_ID(obj)
      dialogVisible.value = false
      addExperimentSuccess()
    })
  }).catch(error => {
    console.log(error)
  }).finally(() => {
    btnSaveLoading.value = false
  })
}
function handleSaveVersion() {
  nextTick(() => {
    saveVersionDialogRef.value.init()
  })
}
function addExperimentSuccess() {
  ElMessageBox.confirm(`实验创建成功, 是否前往实验详情页面?`, '创建成功', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    dialogClose()

    router.push({ path: `project/${store.project_id}/designer-experiments`})
  }).catch(() => {
    dialogClose()
  })
}
defineExpose({ init })
</script>

<style lang="scss">
.choiceHost {
  .el-select-dropdown__item {
    display: flex;
    max-width: 478px;

    .name {
      flex: 1;
      max-width: 478px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .speed_up {
      color: #8492a6;
      font-weight: 400;
      margin-left: 20px;

      .el-tag {
        height: 24px;
        line-height: 22px;
      }
    }
  }
}
</style>
